<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jspreadsheet</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
</head>

<body>
  <div>
    <ul>
      <li>
        <a href="https://bossanova.uk/jspreadsheet/v4/">官方文档</a>
      </li>
      <li>可以从 Excel 复制并直接粘贴到您的在线电子表格，反之亦然</li>
      <li>可以从 JS 数组、JSON、CSV 或 XSLX 文件创建在线电子表格</li>
      <li>支持公式的页脚</li>
      <li>多列调整大小</li>
      <li>完整的新公式引擎，没有外部依赖，结果更快</li>
      <li>拖放列</li>
      <li>可调整大小的行</li>
      <li>合并列</li>
      <li>搜索</li>
      <li>分页</li>
      <li>延迟加载</li>
      <li>全屏标志</li>
      <li>图片上传</li>
      <li>本机颜色选择器</li>
      <li>更好的移动兼容性</li>
      <li>更好的嵌套标题兼容</li>
      <li>惊人的键盘导航支持</li>
      <li>更好的隐藏列管理</li>
      <li>出色的数据选择器：下拉菜单、自动完成、多个、组选项和图标</li>
      <li>从 XSLX 导入（实验性）</li>
    </ul>
  </div>
  <div id="spreadsheet"></div>

  <div id="console"></div>

  <script>
    var data = [
      ['Mazda', 2001, 2000, '2006-01-01'],
      ['Pegeout', 2010, 5000, '2005-01-01'],
      ['Honda Fit', 2009, 3000, '2004-01-01'],
      ['Honda CRV', 2010, 6000, '2003-01-01'],
    ];

    var table = jspreadsheet(document.getElementById('spreadsheet'), {
      data: data,
      colHeaders: ['Model', 'Year', 'Price', 'Date'],
      colWidths: [300, 80, 100, 100],
      columns: [
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
        { type: 'calendar' },
      ],
      mergeCells: {
        A1: [2, 1]
      },
      minDimensions: [10, 10],
      // 语言格式化
      text: {
        noRecordsFound: 'Nenhum registro encontrado',
        showingPage: 'Mostrando página {0} de {1} entradas',
        show: 'Show',
        entries: 'entradas',
        insertANewColumnBefore: 'Inserir uma nova coluna antes de',
        insertANewColumnAfter: 'Inserir uma nova coluna depois de',
        deleteSelectedColumns: 'Excluir colunas selecionadas',
        renameThisColumn: 'Renomear esta coluna',
        orderAscending: 'ordem ascendente',
        orderDescending: 'Order decrescente',
        insertANewRowBefore: '在此之前插入新行',
        insertANewRowAfter: '在后面插入新行',
        deleteSelectedRows: '删除选定行',
        editComments: '编辑评论',
        addComments: '添加评论',
        comments: 'Comentários',
        clearComments: 'Limpar comentários',
        copy: '复制',
        paste: '粘贴',
        saveAs: '另存为',
        about: '关于',
        areYouSureToDeleteTheSelectedRows: 'Tem certeza de excluir as linhas selecionadas?',
        areYouSureToDeleteTheSelectedColumns: 'Tem certeza de excluir as colunas selecionadas?',
        thisActionWillDestroyAnyExistingMergedCellsAreYouSure: 'Esta ação irá destruir todas as células mescladas existentes. Você tem certeza?',
        thisActionWillClearYourSearchResultsAreYouSure: 'Esta ação limpará seus resultados de pesquisa. Você tem certeza?',
        thereIsAConflictWithAnotherMergedCell: 'Há um conflito com outra célula mesclada',
        invalidMergeProperties: 'Propriedades mescladas inválidas',
        cellAlreadyMerged: 'Cell já mesclado',
        noCellsSelected: 'Nenhuma célula selecionada',
      }
    });
  </script>

  <button type="button" onclick="table.setMerge('A3', 2, 2);">Merge cell A3 (colspan: 2, rowspan: 2)</button>
  <button type="button" onclick="table.removeMerge('A3');">Destroy merge from A3</button>
  <button type="button" onclick="document.getElementById('console').innerHTML = JSON.stringify(table.getMerge());">Get
    all merged cells</button>
  <button type="button" onclick="table.destroyMerged();">Destroy all merged</button>
</body>

</html>